<template>
  <div class="flex justify-center items-center" style="height: 100vh">
    <div class="row" style="width: 80vw;min-width: 300px">
      <div class="col-6 flex justify-center items-center">
        <q-img
          src="https://cdn.quasar.dev/img/mountains.jpg"
          spinner-color="white"
          style="height: 300px; max-width: 400px"
        />
      </div>
      <q-separator vertical inset/>
      <div class="col flex justify-center items-center">
        <q-card square style="min-width: 290px; height: 100%; width: 60%;" class="no-shadow">
          <q-card-section align="center">
            <div class="text-h4">物联网平台</div>
          </q-card-section>

          <q-card-section align="center">
            <!-- 用户名 -->
            <q-input
               clearable
               standout="bg-cyan text-white"
               bottom-slots
               v-model="param.username"
               label="账号"
            >
              <template v-slot:prepend>
                <q-icon name="account_circle"/>
              </template>
            </q-input>
            <!-- 密码 -->
            <q-input
              standout="bg-cyan text-white"
              bottom-slots
              v-model="param.password"
              label="密码"
              :type="isShowPassword ? 'password' : 'text'" hint=""
            >
              <template v-slot:prepend>
                <q-icon name="vpn_key"/>
              </template>
              <template v-slot:append>
                <q-icon
                  :name="isShowPassword ? 'visibility_off' : 'visibility'"
                  class="cursor-pointer"
                  @click="isShowPassword = !isShowPassword"
                />
              </template>
            </q-input>
            <q-btn
              class="login-btn"
              unelevated
              text-color="white"
              color="primary"
              @click="onClicked"
            >登  录  系  统
            </q-btn>

            <div class="row justify-between">
              <q-btn flat label="忘记密码"/>
              <q-btn flat label="我要注册"/>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import api from 'axios'
import { useMessageNotify } from 'src/hook/common/useMessageNotify';
import { useCommonStore } from 'stores/commonStore';
import { CMenu, CUser, menuItem } from 'src/stores/model';
import { buildMenuTree } from 'src/hook/buildMenuTree';
import { authBaseUrlAPI } from 'src/util/AuthBaseConst';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'LoginIndex',
  setup (props, context) {
    //*********************************************************
    //              消息通知
    //*********************************************************
    const {
      showMessage
    } = useMessageNotify();

    //*********************************************************
    //          store和router
    //*********************************************************
    //router
    const router = useRouter();

    //store
    const store = useCommonStore();

    //*********************************************************
    //          buildMenuTree
    //*********************************************************
    const {
      generateMenuTree,
      routerPackage
    } = buildMenuTree();

    //*********************************************************
    //          响应参数
    //*********************************************************
    //参数
    let param = ref({
      username: 'marry',
      password: '123456'
    });

    //密码是否显示
    let isShowPassword = ref(true);

    //登录
    const onClicked = () => {
      api.post(authBaseUrlAPI.AUTH_USER_LOGIN, {
        username: param.value.username,
        password: param.value.password
      }).then((res) => {
        if (res.data.message === 'Success') {
          //返回对象
          let record = res.data.data;
          let user: CUser = {
            username: record.user.nick,
            password: record.user.password,
            roleId: record.user.roleId
          };
          store.initUser();
          store.setUser(user);
          store.initToken();
          store.setToken(record.token);
          //alert(record.token);

          //形成属性按钮
          let list: CMenu[] = generateMenuTree(record.menuList as menuItem[]);
          store.initMenus();
          store.setMenus(record.menuList as menuItem[]);

          //动态加载路由
          routerPackage(router, list);

          //路由跳转主页面
          router.push('/');
        } else {
          showMessage(res.data.message);
        }
      }).catch((error) => {
        showMessage(error.message);
      })
    }

    return {
      param,
      isShowPassword,

      onClicked
    }
  }
})
</script>

<style lang="scss" scoped>
.login-btn {
  font-size: large;
  margin-top: 0px;
  margin-bottom: 20px;
  width: 100%;
}
</style>
